<template>
  <div>
    <CloudSelect
      v-model="value"
      placeholder="Select users3443"
      style="width: 100%"
      option-label-prop="label"
      dropdownClassName="doc-load-cloud-select-test-option"
      @popupScroll="handlePopupScroll($event)"
    >
      <CloudSelectOption
        v-for="d in optionList"
        :key="d.value"
        :disabled="d.disabled"
        :label="d.text"
      >
        <div class="option-text" :title="d.text">
          {{ d.text }}
        </div>
      </CloudSelectOption>
    </CloudSelect>
  </div>
</template>
<script>
import reqwest from 'reqwest';

export default {
  title: '10.单选滚动加载',
  subTitle: '使用 popupScroll下拉列表滚动时的回调',
  data() {
    return {
      optionList: [],
      value: undefined,
      pageNumber: 1,
      pageSize: 10,
      total: 0
    };
  },
  computed: {
  },
  methods: {
    handlePopupScroll(e) {
      const { target } = e
      // 判断是否滑动到底部
      if (target.scrollTop + target.offsetHeight >= (target.scrollHeight - 3)) {
        this.pageNumber += 1;
        console.log(' this.optionList000000000', this.optionList)
        if (this.optionList.length < this.total) {
          this.getList()
        }
      }
    },

    getList() {
      reqwest({
        url: 'http://172.31.15.10:53000/mock/95/cloud-components/cloud-select/pgeList',
        method: 'get',
        data: [{
          name: 'page',
          value: this.pageNumber
        },
        {
          name: 'size',
          value: this.pageSize
        }],
        success: (res) => {
          console.log(' this.res', res)
          this.total = res.data.total
          this.optionList.push(...res.data.data)
        },
      });
    }
  },
  mounted() {
    this.getList()
  }
};
</script>
<style lang="scss">
.doc-load-cloud-select-test-option {
  .option-text {
    word-break: break-all;
    word-wrap: break-word;
    // white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .ant-select-dropdown-menu-item {
    white-space: normal;
  }
}
</style>